<template>
    <div>
    <div class="nav_top" :class="Scroll>100?'show':''">
        <div class="left">
           <router-link to="/">
            <img src="../assets/HeaderListimg/logo.png" alt="" class="img">
           </router-link>
        </div>
        <ul class="center">
            <li v-for="item in categoryList" :key="item.id"  @click="goErji(item.id)">{{ item.name }}</li>
        </ul>
        <div class="right">
         <router-link to="/">品牌</router-link>
         <router-link to="/">专题</router-link>
        </div>
    </div>
    </div>
</template>

<script>
import {getCategory} from "@/apis/headerList"
 export default {
       data(){
        return {
            categoryList:[],
            Scroll:0
        }
           
       },
       methods:{
        async  getCategoryData(){
        let res=await getCategory()
        //  console.log(res)
          if(res.code == 1){
        this.categoryList=res.result
        //  console.log( this.categoryList)
       }
           },
           goErji(id){
            this.$router.push(
                {
                path:"/"+id,
                query:{
                    queryId:id
                }
            }
            )
           },
    getScroll(){
        let scrollHeight =document.documentElement.scrollTop || document.body.scrollTop;
        this.Scroll=scrollHeight
    }

       },
       mounted(){
       this.getCategoryData()
       window.addEventListener('scroll',this.getScroll)
       }
    }
</script>

<style scoped lang="scss">

.nav_top.show{
    width: 100%;
    height: 80px;
        position: fixed;
        top: 0; 
        left:0;
        opacity: 1 ;
        transition: 0.5s ;
        z-index: 999;
    }
.nav_top{
    padding: 0 15%;
    height: 80px;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    position: fixed;
        top: -80px;
        left:0;
        opacity: 0;
    .left{
        .img{
            display: block;
            height: 80px;
        }
    }
    .center{
        display: flex;
        align-items: center;
         flex: 1;
        justify-content: space-around;
        li{
            font-size: 16px;
            height: 32px;
            line-height: 32px;
            font-family: "微软雅黑";
        }
        // li:not(li:nth-of-type(1)){
        //     margin-left: 46px;
        // }
        li:hover {
         border-bottom: 1px solid #27ba9b;
        }
        li:hover a{
            color:#27ba9b;
        }
    }
    .right{
       width: 200px;
       height: 32px;
       line-height: 32px;
       border-left:2px solid#27ba9b;
       display: flex;
       justify-items: center;
       a{
        margin-left: 40px;
        font-size: 16px;
       }
    }
}
.iconfont{
    font-size: 18px;
}
</style>